<template>
	<!-- 新建物料单 -->
	<HeaderNavTabarVue  :title="title" />
	<view class="business" :style="'min-height: ' + boxHeight + 'rpx;'">
		<view class="main">
			<view class="material-list" v-for="(item, index) in businessData.businessObj" :key="index">
				<view class="list-num">
					<p class="indexHao">第{{ toChineseNumberFn(index + 1) }}项</p>
				</view>

				<view class="list-info">
					<view class="main-content-row">
						<picker @change="businessTypeChange($event, index)" :value="item.businessType" :range="businessTypePicker"
							class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">业务类型</text>
								<view class="info-list-right">
									<view v-if="item.businessType" class="uni-input">{{ item.businessType }}</view>
									<view class="uni-inputs" v-else>请选择</view>
									<i class="iconfont icon-youjiantou"></i>
								</view>
							</view>
						</picker>
						<MyPicker @getVlaue="getValue('productName', index, $event)" :ref="(el) => getRiskSpreadRef(el, index)"
							popupTitle="请选择存货名称" class="picker-content">
							<view class="measurement-info-list" @tap="toggle('productName', index)">
								<text class="info-list-left isrequired">存货名称</text>
								<view class="info-list-right">
									<view v-if="item.productName" class="uni-input">{{ item.productName }}</view>
									<view class="uni-inputs" v-else>请输入</view>
									<i class="iconfont icon-youjiantou"></i>
								</view>
							</view>
						</MyPicker>

						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">单位与数量</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.totalQuantity" @input="totalQuantityChange(item.totalQuantity,item.unit)"/>
									<text class="unit"> {{ item.unit }}</text>
								</view>
							</view>
						</view>
						<!-- 校验失败提示 -->
						<view class="error-reg" v-if="!totalQuantityReg">
							请输入有效的正整数
						</view>
						<view class="picker-content" v-if="item.unit == '平方米'">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">长度</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.materialHeight" />
									<text class="unit">m</text>
								</view>
							</view>
						</view>
						<view class="picker-content" v-if="item.unit == '平方米'">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">宽度</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.materialWidth" />
									<text class="unit">m</text>
								</view>
							</view>
						</view>
						<view class="picker-content" v-if="item.unit == '平方米'">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">件数</text>
								<view class="info-list-right">
									<view class="info-content">
										<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.quantityPerPiece" @input="quantityPerPieceChange(item.quantityPerPiece)" />
									</view>
								</view>
							</view>
						</view>
						<!-- 校验失败提示 -->
						<view class="error-reg" v-if="!quantityPerPieceReg">
							请输入有效的正整数
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">设计元素</text>
								<view class="info-list-right">
									<view class="info-content">
										<input adjust-position type="text" class="uni-input placeholder-right" placeholder="请输入" v-model="item.materialDesignElements" />
									</view>
								</view>
							</view>
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left">备注</text>
								<view class="info-list-right">
									<view class="info-content">
										<input adjust-position type="text" class="uni-input placeholder-right" placeholder="请输入" v-model="item.materialRemark" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list-info">
					<view class="main-content-row">
						<MyPicker @getVlaue="getValue('outsourcingName', index, $event)" :ref="(el) => getoutsourcingRef(el, index)"
							popupTitle="请选择外协商名称" class="picker-content">
							<view class="measurement-info-list" @tap="toggle('outsourcingName', index)">
								<text class="info-list-left isrequired">外协商名称</text>
								<view class="info-list-right">
									<view v-if="item.outsourcingName" class="uni-input">{{ item.outsourcingName }}</view>
									<view class="uni-inputs" v-else>请选择</view>
									<i class="iconfont icon-youjiantou"></i>
								</view>
							</view>
						</MyPicker>

						<picker @change="costCategoryChange($event, index)" :value="item.costCategory" :range="costCategoryOptions"
							class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">成本类型</text>
								<view class="info-list-right">
									<view v-if="item.costCategory" class="uni-input">{{ item.costCategory }}</view>
									<view class="uni-inputs" v-else>请选择</view>
									<i class="iconfont icon-youjiantou"></i>
								</view>
							</view>
						</picker>

						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">成本单价</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.price" />
									<text class="unit">元</text>
								</view>
							</view>
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">成本金额</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.salePriceAll" />
									<text class="unit">元</text>
								</view>
							</view>
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">销售价</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.salePrice" />
									<text class="unit">元</text>
								</view>
							</view>
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">销售金额</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.amount" />
									<text class="unit">元</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="list-info">
					<view class="main-content-row">
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">预收款</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.prepayment" />
									<text class="unit"> 元</text>
								</view>
							</view>
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">材料费</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.materialFee" />
									<text class="unit"> 元</text>
								</view>
							</view>
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">预算成本</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.budgetCost" />
									<text class="unit"> 元</text>
								</view>
							</view>
						</view>
						<view class="picker-content">
							<view class="measurement-info-list">
								<text class="info-list-left isrequired">实际成本</text>
								<view class="info-list-right">
									<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="item.actualCost" />
									<text class="unit"> 元</text>
								</view>
							</view>
						</view>
					</view>

					<view class="box-btn">
						<button class="detele-btn" @tap="deteleBtn(index)"
							v-if="businessData.businessObj.length > 1 || index !== 0">
							<i class="iconfont icon-shanchu"></i>
							<text>删除</text>
						</button>
						<button class="copy-btn" @tap="copyBtn(item)">
							<i class="iconfont icon-copy-template"></i>
							<text>复制</text>
						</button>
						<button class="add-btn" @tap="addBtn">
							<i class="iconfont icon-addNode"></i>
							<text>增加</text>
						</button>
					</view>
				</view>
			</view>
			<view class="main-content-row totalCost">
				<h3>预算成本</h3>
				<view class="picker-content">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">预算总材料费</text>
						<view class="info-list-right">
							<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="businessData.moneyMaterials" />
							<text class="unit"> 元</text>
						</view>
					</view>
				</view>
				<view class="picker-content">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">预算总安装费</text>
						<view class="info-list-right">
							<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="businessData.moneyInstall" />
							<text class="unit"> 元</text>
						</view>
					</view>
				</view>
				<view class="picker-content">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">预算总城管费</text>
						<view class="info-list-right">
							<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="businessData.moneyCity" />
							<text class="unit"> 元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="main-content-row totalCost">
				<h3>实际成本</h3>
				<view class="picker-content">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">实际总材料</text>
						<view class="info-list-right">
							<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="businessData.actualTotalMaterial"
								disabled />
							<text class="unit"> 元</text>
						</view>
					</view>
				</view>
				<view class="picker-content">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">实际总安装费</text>
						<view class="info-list-right">
							<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="businessData.actualTotalInstall"
								disabled />
							<text class="unit"> 元</text>
						</view>
					</view>
				</view>
				<view class="picker-content">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">实际总城管费</text>
						<view class="info-list-right">
							<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="businessData.actualUrbanManagementFee"
								disabled />
							<text class="unit"> 元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="main-content-row totalCost">
				<view class="picker-content">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">总金额</text>
						<view class="info-list-right">
							<input adjust-position type="number" class="uni-input placeholder-right" placeholder="请输入" v-model="businessData.moneyAll" disabled />
							<text class="unit"> 元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="floor">
			<button class="go-material-info" @tap="goDesignDrawings">
				<p>下一步</p>
				<text>上传设计稿</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		watchEffect
	} from 'vue'
	import {
		getTitleBarHeight
	} from '@/utils/system.js'
	import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
	import userToChineseNumber from '@/hook/toChineseNumber.js'
	import {
		getproductsApi,
		getOutsourcingApi
	} from '@/api/customer.js'
	import store from '@/store'
	import MyPicker from '@/components/MyPicker/MyPicker.vue'
	import {
		isObjectValuesNotEmpty
	} from '@/utils/objIsnull.js'
	import {zzshuRegFn} from '@/utils/reg.js'

	const {
		toChineseNumberFn
	} = userToChineseNumber()
	const title = '新建物料单 - 业务信息'
	// 页面内容高度
	const boxHeight = (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2

	let riskSpreadRefList = ref([])
	let outsourcingRefList = ref([])
	// 上一级参数
	let oneViewParams = ref()
	const getRiskSpreadRef = (el, index) => {
		if (el) {
			riskSpreadRefList.value[index] = el
		}
	}
	const getoutsourcingRef = (el, index) => {
		if (el) {
			outsourcingRefList.value[index] = el
		}
	}
	let businessData = reactive({
		moneyAll: 0, // 总金额
		moneyMaterials: 0, // 材料费
		moneyInstall: 0, // 安装费
		moneyCity: 0, // 城管费
		actualTotalMaterial: 0, // 实际材料费
		actualTotalInstall: 0, //  实际总安装费
		actualUrbanManagementFee: 0, // 实际总城管费
		businessObj: [{
			businessType: '', // 业务类型
			productId: '', // 存货名称
			productName: '', // 存货名称
			totalQuantity: '', // 数量
			unit: '', // 单位
			materialHeight: null, // 长度
			materialWidth: null, // 宽度
			quantityPerPiece: 1, // 件数
			materialDesignElements: null, // 设计元素
			materialRemark: null, // 备注

			outsourcingId: '', // 外协商
			outsourcingName: '', // 外协商
			costCategory: '', // 成本类型
			price: 0, // 成本价
			salePriceAll: 0, // 成本金额
			salePrice: null, // 销售价
			amount: 0, // 销售金额

			prepayment: null, // 预收款
			materialFee: null, // 材料费
			urbanManagementFee: null, // 城管费
			budgetCost: null, // 预算成本
			actualCost: null, // 实际成本
		}, ],
	})
	let costCategoryOptions = ref(['月结供应商', '月结工时费', '现结供应商', '现结工时费', '城管费'])
	let businessTypePicker = ['物料类', '门头', '装修类', '活动类', '其他']
	let outsourcingNameList = ref([])
	let productNameList = ref([])
	// 打开模态床
	const toggle = (i, index) => {
		switch (i) {
			case 'productName':
				store.commit('setCustomerList', productNameList.value)
				riskSpreadRefList.value[index].toggle('bottom')
				break
			case 'outsourcingName':
				store.commit('setCustomerList', outsourcingNameList.value)
				outsourcingRefList.value[index].toggle('bottom')
				break
			default:
				break
		}
	}
	// 选择业务类型
	const businessTypeChange = ($enent, index) => {
		businessData.businessObj[index].businessType = businessTypePicker[$enent.detail.value]
	}

	// 选择成本类型
	const costCategoryChange = ($event, index) => {
		businessData.businessObj[index].costCategory = costCategoryOptions.value[$event.detail.value]
	}
	const bindDateChange = (e) => {
		businessData.surveyDate = e.detail.value
	}
	const goDesignDrawings = () => {
		const RequiredItemList = JSON.parse(JSON.stringify(businessData))
		console.log(businessData, 'businessData')
		RequiredItemList.businessObj.forEach(item => {
			if (item.unit !== '平方米') {
				delete item.materialHeight
				delete item.materialWidth
				delete item.quantityPerPiece
			}
			delete item.materialRemark
			delete item.urbanManagementFee
		})
		console.log(RequiredItemList, 'RequiredItemList')
		if (isObjectValuesNotEmpty(RequiredItemList)) {
			oneViewParams.value.materialList = JSON.stringify(businessData)
			uni.navigateTo({
				url: '/pages/material/designDrawings/designDrawings?oneViewParams=' +
					encodeURIComponent(JSON.stringify(oneViewParams.value)),
			})
		} else {
			uni.showToast({
				title: '请输入完整数据',
				icon: 'error'
			})
		}

	}
	const getValue = (i, index, $event) => {
		switch (i) {
			case 'productName':
				console.log($event)
				// 选择的存货名称
				businessData.businessObj[index].productId = $event.value
				businessData.businessObj[index].productName = $event.label
				businessData.businessObj[index].unit = $event.unit
				riskSpreadRefList.value[index].closePop()
				break
			case 'outsourcingName':
				// 选择的外协名称
				businessData.businessObj[index].outsourcingId = $event.value
				businessData.businessObj[index].outsourcingName = $event.label
				outsourcingRefList.value[index].closePop()
				break
			default:
				break
		}
	}

	// 计算材料安装城管费
	watchEffect(() => {
		// 材料费
		let materials = 0
		// 安装费
		let installs = 0
		// 城管费
		let chengguans = 0
		// 总金额
		let moneyAll = 0
		businessData.businessObj.forEach((v) => {
			// 计算每个工单表格 金额
			if (v.unit == '平方' || v.unit == 'm²' || v.unit == '平方米') {
				v.totalQuantity = v.materialWidth * v.materialHeight

				if (v.salePrice) {
					v.amount = v.totalQuantity * v.salePrice ? v.totalQuantity * v.salePrice : 0
				} else {
					v.amount = v.totalQuantity * v.price ? v.totalQuantity * v.price : 0
				}
			} else {
				if (v.salePrice) {
					v.amount = v.quantityPerPiece * v.salePrice ? v.quantityPerPiece * v.salePrice : 0
				} else {
					v.amount = v.quantityPerPiece * v.price ? v.quantityPerPiece * v.price : 0
				}
			}

			// 成本金额
			v.salePriceAll = Number(Number(v.totalQuantity * v.price).toFixed(2))

			chengguans += Number(v.urbanManagementFee)
			moneyAll += Number(v.amount)
			materials += Number(Number(v.materialFee) + Number(v.salePriceAll))
		})
		// 材料费
		businessData.moneyMaterials = materials
		// 总金额
		businessData.moneyAll = moneyAll
	})
	// 获取存货下拉菜单数据
	const getproductsApiData = async (v = '') => {
		let params = {
			customerName: v,
		}
		let {
			code,
			data
		} = await getproductsApi(params)
		if (code == 200) {
			let customerList = []
			data.forEach((v) => {
				productNameList.value.push({
					label: v.productName,
					value: v.productId,
					unit: v.unit,
				})
			})
		}
	}
	// 获取外协下拉菜单数据
	const getOutsourcingApiData = async (v = '') => {
		let params = {
			customerName: v,
		}
		let {
			code,
			data
		} = await getOutsourcingApi(params)
		if (code == 200) {
			let customerList = []
			data.forEach((v) => {
				outsourcingNameList.value.push({
					label: v.outsourcingName,
					value: v.outsourcingId,
				})
			})
		}
	}
	const deteleBtn = (i) => {
		uni.showModal({
			content: '你确认要删除这条信息吗？',
			success: function(res) {
				if (res.confirm) {
					businessData.businessObj.splice(i, 1)
				}
			},
		})
	}
	const copyBtn = (v) => {
		let copyData = JSON.parse(JSON.stringify(v))
		businessData.businessObj.push(copyData)
	}
	const addBtn = () => {
		businessData.businessObj.push({
			businessType: '', // 业务类型
			productId: '', // 存货名称
			productName: '', // 存货名称
			totalQuantity: '', // 单位与数量
			materialHeight: '', // 长度
			materialWidth: '', // 宽度
			quantityPerPiece: '', // 件数
			materialDesignElements: '', // 设计元素
			materialRemark: '', // 备注

			outsourcingId: '', // 外协商
			outsourcingName: '', // 外协商
			costCategory: '', // 成本类型
			price: '', // 成本价
			salePrice: '', // 销售价
			amount: '', // 成本价合计

			prepayment: '', // 预收款
			materialFee: '', // 材料费
			// installationFee2: '', // 安装费
			// installationFee: '', // 安装费
			urbanManagementFee: '', // 城管费
			budgetCost: '', // 预算成本
			actualCost: '', // 实际成本
		})
	}
	const totalQuantityReg = ref(true)
	const quantityPerPieceReg = ref(true)
	// 校验单位与数量
	const totalQuantityChange = (value, unit) =>{
		// if(unit === '个' || unit === '卷' || unit === '根' || unit === '支' || unit === '盘'){
			totalQuantityReg.value = zzshuRegFn(value)
		// }
	}
	
	// 件数
	const quantityPerPieceChange = (value) =>{
			quantityPerPieceReg.value = zzshuRegFn(value)
	}
	
	onLoad((options) => {
		oneViewParams.value = JSON.parse(decodeURIComponent(options.materialData))
		console.log(oneViewParams.value)
		getproductsApiData()
		getOutsourcingApiData()
	})
</script>

<style lang="scss" scoped>
	@import '/static/style/index.scss';

	.business {
		padding: $spacing-row-base;
		box-sizing: border-box;
		// @include main-area-bgColor;
		background-color: $uni-bai;
		overflow-y: auto;

		:deep(.uni-input-input) {
			text-align: right;
		}

		.main {
			.main-content-row-center {
				margin: $spacing-col-base 0;
			}

			.totalCost {
				padding-top: 20rpx;
				margin: 20rpx;

				.measurement-info-list {
					@include flex($align: center, $justify: space-between);
					padding: $spacing-row-base;

					.info-list-left {
						// @include font-color-auxiliary;
						color: $uni-fc-fu-lin;
						font-size: $font-size-base;
					}

					.info-list-right {
						@include flex($align: center);

						.info-content {
							@include textStyleBase;
							font-size: 34rpx;
						}

						.iconfont {
							margin-left: 16rpx;
							// @include font-color-auxiliary;
							color: $uni-fc-fu-lin;
						}
					}

					.unit {
						// @include font-color-auxiliary;
						color: $uni-fc-fu-lin;
					}
				}
			}

			.main-content-row {
				// @include background-color;
				background-color: $uni-bg-lin;
				border-radius: 16rpx;

				h3 {
					width: 100%;
					text-align: center;
				}

				.measurement-info-list {
					@include flex($align: center, $justify: space-between);
					padding: $spacing-row-base;

					.info-list-left {
						// @include font-color-auxiliary;
						color: $uni-fc-fu-lin;
						font-size: $font-size-base;
					}

					.info-list-right {
						@include flex($align: center);

						.info-content {
							@include textStyleBase;
							font-size: 34rpx;
						}

						.iconfont {
							margin-left: 16rpx;
							// @include font-color-auxiliary;
							color: $uni-fc-fu-lin;
						}
					}

					.unit {
						// @include font-color-auxiliary;
						color: $uni-fc-fu-lin;
					}
				}
			}

			.main-content-bottom {
				margin-top: $spacing-col-base;
			}

			.material-list {
				.list-num {
					border-top: 1px solid #e5e6eb;
					position: relative;
					margin: 30px 0;

					.indexHao {
						height: 40rpx;
						width: 160rpx;
						// @include main-area-bgColor;
						background-color: $uni-bai;
						// @include font-color-auxiliary;
						color: $uni-fc-fu-lin;
						position: absolute;
						text-align: center;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-size: $font-size-sm-base;
					}
				}

				.list-info {
					margin-top: 32rpx;

					.main-content-row {
						// @include background-color;
						background-color: $uni-bg-lin;
						border-radius: 16rpx;

						.measurement-info-list {
							@include flex($align: center, $justify: space-between);
							padding: $spacing-row-base;

							.info-list-left {
								// @include font-color-auxiliary;
								color: $uni-fc-fu-lin;
								font-size: $font-size-base;
							}

							.info-list-right {
								@include flex($align: center);

								.info-content {
									@include textStyleBase;
									font-size: 34rpx;
								}

								.iconfont {
									margin-left: 16rpx;
									// @include font-color-auxiliary;
									color: $uni-fc-fu-lin;
								}
							}

							.unit {
								// @include font-color-auxiliary;
								color: $uni-fc-fu-lin;
							}
						}
					}

					.box-btn {
						@include flex(center, space-between);
						height: 68rpx;
						font-size: 26rpx;
						margin-top: $spacing-col-sm;
						margin-bottom: $spacing-row-base;

						button {
							height: 100%;
							line-height: 68rpx;
							color: #fff;
							margin: 0;
							font-size: 26rpx;
							flex: 1;

							.iconfont {
								margin-right: 20rpx;
							}
						}

						.detele-btn {
							background-color: #f53f3f;
							margin-right: 20rpx;
						}

						.copy-btn {
							background-color: $btn-bg-color;
							margin-right: 20rpx;
						}

						.add-btn {
							background-color: $btn-bg-color;
						}
					}
				}
			}
		}

		.floor {
			width: 100%;
			@include flex($align: cneter, $justify: center);
			margin-top: 40rpx;

			button {
				width: 335rpx;
				height: 104rpx;
				@include flex($align: center, $flex-column: column);
				line-height: normal;
				padding: 14rpx 0;
				box-sizing: border-box;

				p {
					font-size: 30rpx;
				}

				text {
					font-size: 24rpx;
				}
			}

			.go-material-info {
				background-color: $btn-bg-color;
				margin: 0;
				width: 100%;

				p {
					color: $text-color-white;
				}

				text {
					color: $text-btn-color;
				}
			}
		}
	}
</style>